<template>
	<view>
		<u-card :show-head="false" padding="30" margin="20rpx" :foot-border-top="false">
			<view class="card-body" slot="body">
				<u-form :model="form" ref="uForm" label-width="180">
					<view class="title">
						司机
					</view>
					<u-form-item label="名称:" :border-bottom="false" prop="driverName">
						<u-input v-model="form.driverName" @click="openPicker('driverName')" placeholder="请选择司机" border
							type="select" />
					</u-form-item>
					<u-form-item label="联系方式:" :border-bottom="false">
						<u-input v-model="form.phone" disabled border />
					</u-form-item>
					<u-form-item label="押运员:" :border-bottom="false">
						<u-input v-model="form.escortName" :selectClearable="true" @clear="form.escortId=''"
							@click="openPicker('escortName')" placeholder="请选择押运员" border type="select" />
					</u-form-item>
					<view class="title">
						车辆
					</view>
					<u-form-item label="主车号:" :border-bottom="false" prop="carNo">
						<u-input v-model="form.carNo" @click="openPicker('carNo')" placeholder="请选择主车" border
							type="select" />
					</u-form-item>
					<u-form-item label="挂车号:" v-if="form.trailerNo" :border-bottom="false" prop="trailerNo">
						<u-input disabled v-model="form.trailerNo" border />
					</u-form-item>
					<u-form-item label="挂车号:" v-else :border-bottom="false" prop="bindCarNo">
						<u-input v-model="form.bindCarNo" :selectClearable="true" @click="openPicker('bindCarNo')"
							placeholder="请选择挂车" border type="select" />
					</u-form-item>
					<!-- <u-form-item label="罐箱类型:" :border-bottom="false" prop="tankTypeName"> -->
					<u-form-item label="罐箱类型:" :border-bottom="false">
						<u-input v-model="form.tankTypeName" :selectClearable="true" @click="tankShow=true"
							placeholder="请选择罐箱类型" border type="select" />
					</u-form-item>
					<!-- <u-form-item :label="form.tankType === 'tankTank' ? '坦克罐:' : '罐箱号:'" :border-bottom="false"
						prop="containerNo"> -->
					<u-form-item :label="form.tankType === 'tankTank' ? '坦克罐:' : '罐箱号:'" :border-bottom="false">
						<u-input v-model="form.containerNo" v-if="form.tankType === 'tankTank'" :selectClearable="true"
							@click="openPicker('containerNo')" placeholder="请选择坦克罐" border type="select" />
						<u-input v-else placeholder="请输入罐箱号" v-model="form.containerNo" border />
					</u-form-item>
					<u-card :show-head="false" padding="0" margin="20rpx 0" :foot-border-top="false"
						v-for="(item,index) in form.materials" :key="index">
						<view class="" slot="body">
							<view class="materials-title">
								<view>{{'物料：'+item.matCode}}</view>
								<view>{{'物料描述：'+item.matDesc}}</view>
								<view>{{'剩余数量：'+item.num}}</view>
							</view>
							<u-form-item label="分配数量:" :border-bottom="false">
								<u-input type="digit" :disabled="orderType !== 'ZFO6' || type === 'edit'"
									v-model="item.assignedNum" border />
							</u-form-item>
						</view>
					</u-card>
				</u-form>
			</view>
			<view class="u-footer" slot="foot">
				<u-button plain size="medium" @click="back">返回</u-button>
				<u-button type="primary" size="medium" @click="submit(false)">提交</u-button>
			</view>
		</u-card>
		<u-toast ref="uToast" />
		<u-picker mode="selector" v-model="show" :default-selector="defaultSelector" :title="pickerTitle"
			:range="selectorObj" :range-key="rangeKey" @confirm="pickerConfirm"></u-picker>
		<assign-waybill-popup ref="assignWaybillPopup" @confirm="pickerConfirm"></assign-waybill-popup>
		<u-select v-model="tankShow" value-name="key" label-name="value" @confirm="tankConfirm" :list="tankType">
		</u-select>
	</view>
</template>

<script>
	import assignWaybillPopup from '../../components/assign-waybill-popup.vue';
	export default {
		data() {
			return {
				form: {
					driverId: "", //司机id
					driverName: "", //司机姓名
					phone: "", //联系方式
					escortId: "", //押运员id
					escortName: "", //押运员姓名
					carId: "", //车辆id
					carNo: "", //主车号
					trailerNo: "", //与车辆id绑定的挂车号
					bindCarNo: "", //挂车号
					containerNo: "", //罐箱号
					materials: [], //物料
					requestId: "", //需求单id
					transportId: "", //运输单id
					tankType: "", //罐箱类型
					tankTypeName: "", //罐箱类型名称
				},
				rules: {
					driverName: [{
						required: true,
						message: '请选择司机',
						trigger: 'blur,change'
					}],
					escortName: [{
						required: true,
						message: '请选择押运员',
						trigger: 'blur,change'
					}],
					carNo: [{
						required: true,
						message: '请选择主车',
						trigger: 'blur,change'
					}],
					bindCarNo: [{
						required: true,
						message: '请选择挂车',
						trigger: 'blur,change'
					}],
					containerNo: [{
						required: true,
						message: '请输入罐箱号',
						trigger: 'blur,change'
					}],
					tankTypeName: [{
						required: true,
						message: '请选择罐箱类型',
						trigger: 'blur,change'
					}],
				},
				driverList: [], //司机列表
				carList: [], //车辆列表
				trailerList: [], //挂车列表
				supercargoList: [], //押运员列表
				tankList: [], //坦克罐列表
				selectorObj: [], //当前打开的选择列
				show: false, //选择显示
				rangeKey: 'name', //选择列表展示的字段
				pickerType: '', //选择列表选择返回判断是表单哪个字段
				pickerTitle: '选择司机',
				orderType: "", //货运订单类型
				type: "add",
				tankShow: false, //罐箱类型显示
				tankType: [], //罐箱类型
			}
		},
		components: {
			assignWaybillPopup,
		},
		watch: {
			'form.tankTypeName'(val) {
				if (val === '') {
					this.form.tankType = ""
					this.form.containerNo = ""
					this.rules.containerNo[0].message = this.form.tankType === "tankTank" ? "请选择坦克罐" : "请输入罐箱号"
					this.$refs.uForm.setRules(this.rules);
				}
			}
		},
		onLoad(option) {
			this.form = {
				driverId: "", //司机id
				driverName: "", //司机姓名
				phone: "", //联系方式
				escortId: "", //押运员id
				escortName: "", //押运员姓名
				carId: "", //车辆id
				carNo: "", //主车号
				trailerNo: "", //与车辆id绑定的挂车号
				bindCarNo: "", //挂车号
				containerNo: "", //罐箱号
				materials: [], //物料
				requestId: "", //需求单id
				transportId: "", //运输单id
				tankType: "", //罐箱类型
				tankTypeName: "", //罐箱类型名称
			}
			if (option) {
				if (option.type === 'edit') {
					uni.setNavigationBarTitle({
						title: "修改运单"
					})
				}
				this.orderType = option.orderType
				this.type = option.type
				this.form.requestId = option.id
				this.form.transportId = option.transportId;
				this.$u.api.carrier.getTankType().then(res => {
					if (res) {
						this.tankType = res;
					}
				})
				this.$u.api.carrier.driverCarEscortList({
					id: option.id,
					tmId: option.tmId,
					transportId: option.transportId,
				}).then(data => {
					if (data.code === 200 && data.success) {
						this.driverList = data.data.driver;
						this.carList = data.data.car;
						this.trailerList = data.data.trailer;
						this.tankList = data.data.tank
						this.supercargoList = data.data.supercargoInfo;
						// 运单详情
						if (data.data.transportOrder) {
							for (let i in this.form) {
								this.form[i] = data.data.transportOrder[i] || this.form[i];
							}
							this.form.escortId = data.data.transportOrder.supercargoId || "";
							this.form.phone = data.data.transportOrder.driverPhone || "";
						}
						for (let i in this.carList) {
							if (this.carList[i].id == this.form.carId) {
								if (this.carList[i].bindCarNo) {
									this.form.trailerNo = this.carList[i].bindCarNo;
									this.form.bindCarNo = "";
								} else {
									this.form.trailerNo = "";
								}
							}
						}
						for (let i in this.supercargoList) {
							if (this.supercargoList[i].id == this.form.escortId) {
								this.form.escortName = this.supercargoList[i].name
							}
						}
						//运单物料
						let materials =
							this.type === "add" ? "demandOrderItems" : "transportOrderItems";
						this.form.materials = data.data[materials].map((item) => {
							return {
								id: item.id,
								itemNo: item.itemNo,
								matCode: item.matCode,
								matDesc: item.matDesc,
								num: item.num,
								assignedNum: item.num,
							};
						});
					}
				}).catch(() => {})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			//海运
			oceanShipping() {
				return this.orderType === "ZFB1" || this.orderType === "ZFB2";
			},
			//铁运
			railwayTransportation() {
				return this.orderType === "ZFO3" || this.orderType === "ZFO9";
			},
			//选择器默认选择
			defaultSelector() {
				try {
					let num = this.selectorObj.findIndex(item => item[this.rangeKey] === this.form[this.pickerType])
					return [num < 0 ? 0 : num]
				} catch (e) {
					return [0]
				}
			}
		},
		methods: {
			//打开选择列表
			openPicker(type) {
				this.pickerType = type
				switch (type) {
					case 'driverName':
						this.selectorObj = this.driverList
						this.rangeKey = 'name'
						this.pickerTitle = '选择司机'
						break;
					case 'escortName':
						this.selectorObj = this.supercargoList
						this.rangeKey = 'name'
						this.pickerTitle = '选择押运员'
						break;
					case 'carNo':
						this.selectorObj = this.carList
						this.rangeKey = 'carNo'
						this.pickerTitle = '选择车辆'
						break;
					case 'bindCarNo':
						this.selectorObj = this.trailerList
						this.rangeKey = 'bindCarNo'
						this.pickerTitle = '选择挂车'
						break;
					case 'containerNo':
						this.selectorObj = this.tankList
						this.rangeKey = 'tankNumber'
						this.pickerTitle = '选择坦克罐'
						break;
				}
				// this.show = true
				this.$refs.assignWaybillPopup.open(this.pickerTitle, this.selectorObj, this.rangeKey)
			},
			//选择返回
			pickerConfirm(val) {
				// this.form[this.pickerType] = this.selectorObj[val[0]][this.rangeKey]
				// switch (this.pickerType) {
				// 	case 'driverName':
				// 		this.form.driverId = this.selectorObj[val[0]].id
				// 		this.form.driverName = this.selectorObj[val[0]].name
				// 		this.form.phone = this.selectorObj[val[0]].phone
				// 		break;
				// 	case 'escortName':
				// 		this.form.escortId = this.selectorObj[val[0]].id
				// 		this.form.escortName = this.selectorObj[val[0]].name
				// 		break;
				// 	case 'carNo':
				// 		this.form.carId = this.selectorObj[val[0]].id
				// 		this.form.carNo = this.selectorObj[val[0]].carNo
				// 		this.form.trailerNo = this.selectorObj[val[0]].bindCarNo
				// 		if (this.selectorObj[val[0]].bindCarNo) {
				// 			this.form.bindCarNo = ''
				// 		}
				// 		break;
				// 	case 'bindCarNo':
				// 		this.form.bindCarNo = this.selectorObj[val[0]].bindCarNo
				// 		break;
				// }
				this.form[this.pickerType] = val[this.rangeKey]
				switch (this.pickerType) {
					case 'driverName':
						this.form.driverId = val.id
						this.form.driverName = val.name
						this.form.phone = val.phone
						break;
					case 'escortName':
						this.form.escortId = val.id
						this.form.escortName = val.name
						break;
					case 'carNo':
						this.form.carId = val.id
						this.form.carNo = val.carNo
						this.form.trailerNo = val.bindCarNo
						if (val.bindCarNo) {
							this.form.bindCarNo = ''
						}
						break;
					case 'bindCarNo':
						this.form.bindCarNo = val.bindCarNo
						break;
				}
			},
			//选择罐箱类型返回
			tankConfirm(val) {
				this.form.tankTypeName = val[0].label
				this.form.tankType = val[0].value
				this.form.containerNo = ''
				this.rules.containerNo[0].message = this.form.tankType === "tankTank" ? "请选择坦克罐" : "请输入罐箱号"
				this.$refs.uForm.setRules(this.rules);
			},
			//提交
			submit(whetherToMakeASingle) {
				this.$refs.uForm.validate(valid => {

					if (valid) {
						for (let i in this.form.materials) {
							if (Number(this.form.materials[i].num) <
								this.form.materials[i].assignedNum ||
								!Number.isInteger(parseInt(this.form.materials[i].assignedNum)) ||
								this.form.materials[i].assignedNum <= 0) {
								this.$refs.uToast.show({
									title: `请输入正确的分配数量! (目前物料${this.form.materials[i].matCode}剩余数量为: ${this.form.materials[i].num})`,
									type: 'warning',
									duration: 3000
								})
								return false
							}
						}
						uni.showLoading()
						let updateData = {
							...this.form,
							whetherToMakeASingle: whetherToMakeASingle,
							materials: this.form.materials.map((item) => {
								return {
									id: item.id,
									num: item.assignedNum,
								};
							}),
							bindCarNo: this.form.trailerNo ?
								this.form.trailerNo : this.form.bindCarNo,
							id: this.form.transportId,
							demandId: this.form.requestId,
							supercargoId: this.form.escortId,
						};
						// delete updateData.driverName;
						// delete updateData.escortName;
						// delete updateData.carNo;
						// delete updateData.phone;
						// delete updateData.trailerNo;
						let http = this.type === "add" ? 'allocatingWaybill' : 'transportUpdate';
						this.$u.api.carrier[http]({
							...updateData
						}).then(data => {
							uni.hideLoading()
							// console.log(data)
							if (data.code === 200 && data.success) {
								this.$refs.uToast.show({
									title: this.type === 'add' ? '分配成功' : '修改成功',
									type: 'success',
									duration: 1000
								})
								setTimeout(() => {
									uni.navigateTo({
										url: `./assignSucceeded?id=${data.data}&type=${this.type}`
									})
								}, 1000)
							} else if (data.code === 206) {
								uni.showModal({
									title: data.msg,
									success: (res) => {
										if (res.confirm) {
											this.submit(true)
										}
									}
								})
							} else {
								this.$refs.uToast.show({
									title: data.msg,
									type: 'error',
									duration: 1000
								})
							}
						}).catch(() => {
							uni.hideLoading()
						})
					}
				});
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.card-body {
		.u-form-item {
			padding: 20rpx !important;
		}

		.materials-title {
			color: #333333;
			font-size: 38rpx;
			line-height: 1.5;
			font-weight: 500;
			padding: 20rpx 0;
			width: 610rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #f2f3f6;
		}

		.title {
			color: #333333;
			font-size: 38rpx;
			font-weight: 500;
			padding: 30rpx 20rpx;
			width: 100%;
			border-bottom: 2rpx solid #f2f3f6;
		}
	}

	.u-footer {
		display: flex;
		justify-content: space-between;
	}
</style>
